import {
	observer
} from 'mobx-react';
import {
	WeaBrowser,
	WeaSearchGroup,
	WeaHelpfulTip,
} from 'ecCom';
import Table from './Table';
import ButtonIcons from './ButtonIcons';
import BrowserButtonIcon from './BrowserButtonIcon';

@observer
export default class TableUnderSearchGroup extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidUpdate(prevProps, prevState) {
		const {
			store
		} = this.props, {
			exportBrowserRef
		} = store;

		this.refs.browser && exportBrowserRef(this.refs.browser);
	}

	getCustomComponent = () => {
		const {
			store
		} = this.props, {
			buttonIcons,
			tableInfoTip,
			table,
			cPage,
		} = store, {
			comsWeaTableStore
		} = table;

		const disabled = comsWeaTableStore.selectedRowKeys.length === 0;

		return (
			<div>
				{
					cPage === 'supportOlder' && <BrowserButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_BrowserButtonIcon@wt3zuo`} store={store}/>
				}
				<ButtonIcons ecId={`${this && this.props && this.props.ecId || ''}_ButtonIcons@uyvxcg`} buttonIcons={buttonIcons} disabled={disabled} />
				<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@1upo5r`} title={<div dangerouslySetInnerHTML = {{ __html: tableInfoTip}}/>} />
			</div>
		)
	}

	getChildren = (store) => {
		const {
			BROWSER,
			browserConditionParam
		} = store;
		return (
			<div>
				<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@gu7rni`} store={store} />
				<div className='hidden'>
					<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@rxvtvj`} 
						{...BROWSER}
						{...browserConditionParam}
					/>
				</div>
			</div>
		);
	}

	render() {
		const {
			store
		} = this.props, {
			tableGroupTitle,
		} = store;

		return (
			<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@jmmyk3`} 
				showGroup
				title={tableGroupTitle} 
				customComponent={this.getCustomComponent()}
				children={this.getChildren(store)}
			/>
		)
	}
}